<html>
	<head>
		<title>Guilalines</title>
		<style type="text/css">
			html{
				overflow:hidden;
			}
			
			body{
				background-color:#fff;
				background-repeat:repeat-x;
				padding:0px;
				margin:0px;
				font-family:Arial, Helvetica, sans-serif;
				overflow:hidden;
				cursor:default;
				white-space:normal;
			}
			
			.swarmNode{
				position:absolute;
				padding:1px;
				background-color:#eee;
			}
		</style>
		<!--[if IE]><script type="text/javascript" src="../tools/js/excanvas_r3/excanvas.js"></script><![endif]-->
		<script type="text/javascript">
			var pAx = 60;
			var pAy = 200;
			var pBx = 700;
			var pBy = 400;
			var pBezier = 33;
		
			window.onload = function(){
				bezierTo(pAx, pAy, pBx, pBy, pBezier);
			};

			var bezierTo = function(Ax, Ay, Bx, By, bezier){
			// bezier strength min -100, max 100
				if(bezier){
					var bezierF = bezier * 0.005;
					if(bezier < 0) var flip = -1;
					else var flip = 1;
				} else{
					var bezierF = 0;
					var flip = 1;
				}
				
			// first bezier point from start point forwards
				var dx = Bx - Ax;
				var dy = By - Ay;
				Vx = bezierF * dx;
				Vy = bezierF * dy;
				
				// place dot allong vector
				var allongSx = Ax + flip * Vx;
				var allongSy = Ay + flip * Vy;

				var dot1 = document.getElementById("dotDiv1");
				dot1.style.left = allongSx + "px";
				dot1.style.top = allongSy + "px";

				// place dot besides vector
				var besidesSx = Ax + flip * Vx - bezierF * dy;
				var besidesSy = Ay + flip * Vy + bezierF * dx;
				
				var dot2 = document.getElementById("dotDiv2");
				dot2.style.left = besidesSx + "px";
				dot2.style.top = besidesSy + "px";

			// second bezier point mirror from end point backwards
				// place dot allong vector
				var allongEx = Bx - flip * Vx;
				var allongEy = By - flip * Vy;
				
				var dot3 = document.getElementById("dotDiv3");
				dot3.style.left = allongEx + "px";
				dot3.style.top = allongEy + "px";
				
				// place dot besides vector
				var besidesEx = Bx - flip * Vx - bezierF * dy;
				var besidesEy = By - flip * Vy + bezierF * dx;
				
				var dot4 = document.getElementById("dotDiv4");
				dot4.style.left = besidesEx + "px";
				dot4.style.top = besidesEy + "px";

				// bezier using previous point
				var canvas = document.getElementById("12");
				var ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
				ctx.strokeStyle = "rgba(0,0,0,6)";
				ctx.lineWidth = 0.5;
				ctx.beginPath();
				ctx.moveTo(Ax, Ay);
				ctx.bezierCurveTo(besidesSx, besidesSy, besidesEx, besidesEy, Bx, By);
				ctx.stroke();
			};
		</script>
	</head>
	<body>
		<div style="padding:10px;">
			<input id="bez" onchange="pBezier = parseFloat(this.value); bezierTo(pAx, pAy, pBx, pBy, pBezier);" value="33"/>
			<br/>
			<input id="aax" onchange="pAx = parseInt(this.value); bezierTo(pAx, pAy, pBx, pBy, pBezier);" value="60"/>
			<input id="aay" onchange="pAy = parseInt(this.value); bezierTo(pAx, pAy, pBx, pBy, pBezier);" value="200"/>
			<br/>
			<input id="bbx" onchange="pBx = parseInt(this.value); bezierTo(pAx, pAy, pBx, pBy, pBezier);" value="700"/>
			<input id="bby" onchange="pBy = parseInt(this.value); bezierTo(pAx, pAy, pBx, pBy, pBezier);" value="400"/>
		</div>
		<div>
			<div id="swarmCanvasLayer" style="width:100%; height:100%; top:0px; left:0px; position:relative;">
				<canvas id="12" style="position:absolute; left:0px; top:0px;" width="800" height="600"></canvas>
				<div id="dotDiv1" style="position:absolute; left:0px; top:0px; width:5px; height:5px; background:#009900;"></div>
				<div id="dotDiv2" style="position:absolute; left:0px; top:0px; width:5px; height:5px; background:#990000;"></div>
				<div id="dotDiv3" style="position:absolute; left:0px; top:0px; width:5px; height:5px; background:#009900;"></div>
				<div id="dotDiv4" style="position:absolute; left:0px; top:0px; width:5px; height:5px; background:#990000;"></div>
			</div>
	</body>
</html>